<template>
  <div class="category-sort-list">
    <div class="img-list-1">
      <div class="img-item" v-for="(item, index) in listInfo1" :key="index">
        <img :src="item.image" alt="图片无法显示" />
        <div>{{ item.title }}</div>
      </div>
    </div>
    <div class="img-list-2">
      <div class="img-item" v-for="item in listInfo2" :key="item.title">
        <img :src="item.image" alt="图片无法显示" />
        <div>{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategorySortList",
  data() {
    return {
      listInfo1: [
        {
          image: require("@/assets/home_images/scroll_imgs/1.jpg"),
          title: "t恤",
        },
        {
          image: require("@/assets/home_images/scroll_imgs/2.jpg"),
          title: "没什么",
        },
      ],
      listInfo2: [
        {
          image: require("@/assets/szzq_images/card_icon_补偿安置方案.png"),
          title: "t恤",
        },
        {
          image: require("@/assets/szzq_images/card_icon_补偿安置方案.png"),
          title: "没什么",
        },
      ],
      currentType:null
    };
  },
 mounted () {
    // 注册事件
		this.$bus.$on('updateData', (content)=>{
			console.log('===kk',content);
      this.currentType = content.typeid
		});
	},
  	// 注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
	// beforeDestroy () {
  //   this.bus.$off('updateData', (content)=>{
	// 		console.log(content);
	// 	});
  // }

};
</script>

<style scoped>
.category-sort-list {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.img-list-1 {
  flex: 1;
}
.img-list-2 {
  flex: 1;
}
.img-list-1 .img-item {
  text-align: center;
  margin: 0 2px 5px 5px;
  border: 1px solid grey;
  border-radius: 5px;
}
.img-list-2 .img-item {
  text-align: center;
  margin: 0 5px 5px 2px;
  border: 1px solid grey;
  border-radius: 5px;
}
img {
  width: 100%;
  border-radius: 5px;
}
</style>